// 用户登录日志
<template>
  <div>
    <el-row class="bread-nav">
      <ul class="bread-nav-title">
        <span>登录日志</span>
      </ul>

      <ul class="bread-nav-content-right">
        <a class="back" @click="goBack">返回</a>
      </ul>
    </el-row>
    <!--<div style="margin-bottom:8px;">-->
      <!--<el-tag type="warning">账号:{{this.params.username}}</el-tag>-->
    <!--</div>-->
    <div class="elTable">
      <table class="myTable">
        <thead>
          <tr>
            <th>
              序号
            </th>
            <th v-if="params.username === null">
              账号
            </th>
            <th>
              登录时间
            </th>
            <th>
              IP
            </th>
            <th>
              IP归属地
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in list" :key="index">
            <td>
              {{index}}
            </td>
            <td v-if="params.username === null">
              {{item.username}}
            </td>
            <td>
              {{ format(item.created_at) }}
            </td>
            <td>
              {{item.ip}}
            </td>
            <td>
              {{item.data}}
            </td>
          </tr>
        </tbody>
      </table>
      </div>
      <div style="margin-top:8px">
        <el-tag type="info" style="width:100%">注意:登录日志最少被保留7天,超过7天部分最多保留最后20条.</el-tag>
      </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      userName: '', // 其他用户名
      // 查詢參數
      params: {
        username: null,
        perpage: 10, // 每页数量
      },
      // 分页信息
      pagination: {
        currentPage: 1,
        totalCount: 0,
        defaultPageSize: 10,
      },
      list: null,
      loading: true,
    }
  },
  computed: {
    ...mapGetters(['info']),
  },
  created() {
    // 拉取数据
    this.checkParams(this.$route.params)
    this.fetchData()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    add0(m) {
      return m < 10 ? '0' + m : m
    },
    format(shijianchuo) {
      // shijianchuo是整数，否则要parseInt转换
      const time = new Date(parseInt(shijianchuo) * 1000)
      const y = time.getFullYear()
      const m = time.getMonth() + 1
      const d = time.getDate()
      const h = time.getHours()
      const mm = time.getMinutes()
      const s = time.getSeconds()
      return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s)
    },
    checkParams(params) {
      if (params && params.username && params.username !== ':username') {
        this.params.username = params.username
      } else {
        this.params.username = null
      }
    },
    // 获取数据
    fetchData() {
      this.loading = true
      this.userName = this.params.username
      if (this.userName) {
        this.$store.dispatch('ListLoginHists', { username: this.userName }) // {params: this.params, pagination: this.pagination,} // 路由参数
          .then(response => {
            this.loading = false
            if (response.data) {
              this.list = response.data.slice(0, 20)
            }
          })
      } else {
        this.$store.dispatch('GetSelfLog') // {params: this.params, pagination: this.pagination,} // 路由参数
          .then(response => {
            this.loading = false
            this.list = response.data.slice(0, 20)
          })
      }
    },

    // 当前页变化
    handleCurrentChange(value) {
      this.pagination.currentPage = value
      this.fetchData()
    },

    // 每页显示数量变化
    handlePageSizeChange(value) {
      this.params.perpage = value
      this.fetchData()
    },
  },
  watch: {
    $route(to, from) {
      // 监控路由变化,从新加载数据
      if (to.params !== from.params) {
        this.checkParams(to.params)
        if (this.pagination.currentPage !== 1) {
          this.pagination.currentPage = 1 // 默认查询第一页,当前页变化,会触发数据拉取
        } else {
          this.fetchData()
        }
      }
    },
  },
}
</script>
<style scoped>
  .bread-nav{
    height:30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-title{
    color:#386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }
  .bread-nav-content-right{
    float: right;
  }
  .bread-nav-content-right .back{
    border:0;
    background:url(/static/agent/img/ico_back.png) no-repeat left 8px;
    color:#386399;
    display: block;
    font-weight: bold;
    margin-right: 10px;
    padding: 0 0 0 20px;
  }
  .bread-nav-content-right .back:hover{
    text-decoration: underline;
  }

  .elTable{
    padding: 10px;
  }


  .myTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 2px  0;
  }
  .myTable th{
    background: url(/static/agent/img/table_head.gif) repeat-x;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .myTable td{
    text-align: center;
    color: #131950;
    line-height: 25px;
    font-size:14px;
    padding: 5px;
    border: 1px solid #B9C2CB;
    box-sizing: border-box;
  }
</style>

